 <template>
   <div id="apply" class='app apply' v-loading="loading" :style="{'backgroundImage':bgImg}" v-if="loginType==''">
     <div id="preloader-body" style='display:none'>
         <div id="cube-wrapper" style='display:none'>
             <div class="cube-folding">
                 <span class="leaf1"></span>
                 <span class="leaf2"></span>
                 <span class="leaf3"></span>
                 <span class="leaf4"></span>
             </div>
             <span class="loading" data-name="Loading">Loading</span>
         </div>
     </div>
    
     <div class='header'>
        <img :src="bgImg2" />
        <div style='display:inline-block;text-align:left;vertical-align: middle;margin-left:15px'> 
            <div class='header_title'>{{title}}</div>
            <div class='header_title_en' >{{title_en}}</div>
        </div>
     </div>
    
     <router-view/>
     <div class="container" v-if="isNormal">
         <div class='login'>
            
             <div class="mod3">
                 <el-card class="box-card" style='width:100%;height:100%;padding:30px;box-sizing:border-box'>
                     <div class="layer1">
                         <div class="word4">
                            
                                
                             欢迎登陆
                         </div>
                         <div class="mod4" id="errormsg"></div>
                        
                         <div class="mod5">
                             <div style='margin-bottom:5px;color:#140823;font-family: PingFangSC-Medium, PingFang SC;font-weight:500;padding-left:15px'>账号</div>
                             <el-input  type="text" id="account" name="account" v-model="account"  autocomplete="off" autofocus required oninvalid="setCustomValidity('用户名不能为空，请输入')" oninput="setCustomValidity('')" @focus="focuss" style='width:98%;border:0;background-color:#f5f5f5;color:#140823'></el-input>
                         </div>
                         <div class="mod6"></div>
                         <div class="mod7" >
                             <div style='margin-bottom:5px;color:#140823;font-family: PingFangSC-Medium, PingFang SC;font-weight:500;padding-left:15px'>密码</div>
                             <el-input type="password" id="password" name="password" v-model="password" autocomplete="off" show-password required oninvalid="setCustomValidity('密码不能为空，请输入')" oninput="setCustomValidity('')"  @focus="focuss"  style='width:98%;background-color:#f5f5f5;color:#140823' @keyup.enter.native="login"></el-input>
                         </div>
                         <div class="mod6"></div>
                          <div >
                               <!--el-checkbox v-model="checked">记住密码</el-checkbox-->
                         </div>
                        
                         <div class="mod8"></div>
                         <div class="mod9" @click="login">
                             <el-button type="primary" style="width: 100%;background:#1b5eb8;border-radius: 30px !important;height:45px" >登录</el-button>
                         </div>
                       
                     </div>
                 </el-card>
                
             </div>
            <!-- 三角形 -->
            <div class="triangle"></div>
         </div>
      
     </div>
     <div v-else class='waring_text'>
        <span v-if="!loading">非法请求，请检查！</span>
         
     </div>
    
    </div> 
    <div v-else-if="loginType=='login2'">
        <div id="preloader-body" style='display:none'>
            <div id="cube-wrapper"  style='display:none'>
                <div class="cube-folding">
                    <span class="leaf1"></span>
                    <span class="leaf2"></span>
                    <span class="leaf3"></span>
                    <span class="leaf4"></span>
                </div>
                <span class="loading" data-name="Loading">Loading</span>
            </div>
        </div>
        <div class="homeapp" v-if="isNormal">
            <div >
                <div class="bgclass1"></div>
                <div class="bgclass2"></div>
                <div class="bgclass3"></div>
                <div class="bgclass4"></div>
            </div>
            <div class="home21"></div>
            <div class="home">
                <div class='header_title' style='margin-bottom:15px;;vertical-align: middle;'><img :src="loginImg" style='width:55px;vertical-align: middle;margin-right:5px;'/>{{title}}</div>
                
                <div class="box">
                    <div class='login_text'>欢迎登陆</div>
                    <div class="mod4" id="errormsg"></div>
                    <el-input v-model="account" prefix-icon="el-icon-user" placeholder="账号" class="input"></el-input>
                    <el-input v-model="password" prefix-icon="el-icon-lock" placeholder="密码" class="input" show-password style='' @keyup.enter.native="login"></el-input>
                    
                    <div style='height:55px;width:90%;margin-bottom:10%;display:flex;flex-direction: row;' v-if="sCode=='tzjj'"> 
                        <el-input v-model="imgCode" prefix-icon="el-icon-lock" style="flex:1" placeholder="验证码" class="input"  @keyup.enter.native="login"></el-input>
                         <img :src="captchaSrc" style="width:100px;cursor: pointer;" title="点击切换验证码" @click="refreshCaptcha"/>
                     </div>
                     <div style='height:35px;width:100%;padding-left:40px;margin-bottom:10%;'> 
                        <!--el-checkbox v-model="checked" style='float:left'>记住密码</el-checkbox-->
                    </div>
                    <el-button type='primary' class="input" @click='login'>登录</el-button>
                </div>
            </div>
        </div>
        <div v-else class='waring_text'>
            非法请求，请检查！
        </div>
    </div>
        
</template>
<script>

import { doDecryptStr } from '../utils/api.js';
import Vue  from 'vue'
import '../assets/css/common.css'
export default {
  name: 'Home',
  components: {
   
  },
  data(){
      return {
         loginImg:"",
         isNormal:false,
         ipsssss:'',
         isLocalhost:'N',
         account:'',
         company:"",
         password:'',
         imgCode:"",
         loading:true,
         isApp:"N",
         isYtj:"N",
         filenames:'',
         sCode:"",
         logo:"",
         bgImg:"http://8.136.193.200:8888/rootImg/gm/logobg3.png",
         bgImg2:"",
         title_en:"",
         title:"",
         checked: false,
         loginType:"",
         mainType:"",
         noTitleMenu:"",
         accountBind:"",
         isBind:"",
         captchaSrc:"/api/api/login/createImgCode"
      }
  },
  beforeCreate(){
      
  },
  mounted(){
    
  },
  created(){
      
    document.documentElement.style.fontSize = document.documentElement.clientWidth*20/320 + 'px';  
    const originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
    if(this.$route.query.isLocalhost){
        this.isLocalhost=this.$route.query.isLocalhost;
    }
    if(this.$route.query.accountBind){
        this.accountBind=this.$route.query.accountBind;
        
    }
    if(this.$route.query.isBind){
        this.isBind=this.$route.query.isBind;
        
    }
    if(this.$route.query.exurl){
        let exurl=this.$route.query.exurl;
        this.$router.push({path:exurl});
    }
    if(this.$route.query.mainType){
        this.mainType=this.$route.query.mainType
    }
    sessionStorage.setItem("mainType",this.mainType)
    
    if(this.$route.query.isDev){
       localStorage.setItem("isDev",this.$route.query.isDev);
    }else{
        localStorage.setItem("isDev","")
    }
   
    //alert(this.$route.query.title);
    if(this.$route.query.title){
        this.title=this.$route.query.title;
    }else{
        //this.title=localStorage.getItem("company");
    }
    if(this.$route.query.company){
        this.company=this.$route.query.company;
    }
     if(this.$route.query.msg){
        localStorage.setItem("osmsg",this.$route.query.msg)
    }
    if(this.$route.query.isApp){
        this.isApp=this.$route.query.isApp
        localStorage.setItem("isApp",this.isApp);
    }else{
        localStorage.setItem("isApp","");
    }
    if(this.$route.query.isYtj){
        this.isYtj=this.$route.query.isYtj
        sessionStorage.setItem("isYtj",this.isYtj);
    }else{
        sessionStorage.setItem("isYtj","");
    }
    
    if(this.$route.query.isAppTop){
        localStorage.setItem("isAppTop",this.$route.query.isAppTop)
    }else{
        localStorage.setItem("isAppTop","")
    }
    if(this.$route.query.sCode){
        this.sCode=this.$route.query.sCode
        localStorage.setItem("sCode",this.sCode);
    }else{
        this.sCode=localStorage.getItem("sCode");
    }
    if(this.$route.query.filenames){
        this.filenames=this.$route.query.filenames
        localStorage.setItem("filenames",this.filenames);
    }else{
        localStorage.setItem("filenames","");
    }

   // alert(2)
    this.getTitle();
    window.onresize = ()=>{
        return(()=>{
                    //键盘弹起与隐藏都会引起窗口的高度发生变化
        const resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
        console.log("heihgt====="+resizeHeight);
        if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
          window.setTimeout(function () {
            document.activeElement.scrollIntoViewIfNeeded()
          }, 0)
        }

        if(resizeHeight-0<originalHeight-0){
        //当软键盘弹起，在此处操作
            console.log("进入到软键盘弹起=========");
            //alert("进入到软键盘弹起=========")
            document.querySelector('body').setAttribute('style', 'height:'+originalHeight+'px;');
            this.scrollerHeight=resizeHeight;
            
        }else{
            //当软键盘收起，在此处操作
            console.log("进入到软键盘收起=========");
            document.querySelector('body').setAttribute('style', 'height:100%;');
            this.scrollerHeight="100%";
            
        }
        })()
            
    }
    //alert(localStorage.getItem("autoLogin"));
    if(this.isApp=="Y"||localStorage.getItem("autoLogin")=="Y"){
        this.account=localStorage.getItem(this.sCode+"weidaUser");
        this.password=localStorage.getItem(this.sCode+"weidaPwd");
        if(this.account&&this.password&&this.$route.query.logout!="Y"){
            this.login();
        }
    }
    if(localStorage.getItem("checked")=="Y"){
        
        this.account=localStorage.getItem(this.sCode+"weidaUser");
        this.password=localStorage.getItem(this.sCode+"weidaPwd");
        this.checked=true;
    }
  
    this.checked=false;
    this.account="";
    this.password="";
    window.setTimeout(function(){
        document.getElementById('cube-wrapper').style.display = "none";
        document.getElementById('preloader-body').style.display = "none";
    },2000)
    
    
  },
  mounted(){
  },
  methods:{
    refreshCaptcha() {
      this.captchaSrc = '/api/api/login/createImgCode?' + Date.now(); // 更新验证码路径，以触发重新加载
    },
    getTitle(){
        localStorage.setItem("imgIp","http://8.136.193.200:8888");
        localStorage.setItem("imgytjIp","http://8.136.193.200:8888");
        if(this.sCode){
            this.$postEncrypt("api","api/common/getTitle",{sCode:this.sCode}).then(data=>{
                
                document.getElementById('cube-wrapper').style.display = "none";
                document.getElementById('preloader-body').style.display = "none";
                this.loading=false;
                if(data[0].title){
                    this.isNormal=true;
                }
                let title=data[0].title.split("#");

                this.title=title[0];
                if(title.length>1){
                    this.title_en=title[1];
                }else{
                    this.title_en="";
                }
                this.loginType=data[0].login;
                this.noTitleMenu=data[0].noTitleMenu;
                sessionStorage.setItem("noTitleMenu",this.noTitleMenu);
                this.loginImg=data[0].loginImg;
              
                sessionStorage.setItem("color",data[0].color)
                
                let uiType=data[0].uiType;
                sessionStorage.setItem("uiType",uiType);
             
                localStorage.setItem(this.sCode+"gmType",data[0].gmType);
                localStorage.setItem("isWater",data[0].water);
               // alert(localStorage.getItem(this.sCode+"gmType")+"="+data[0].gmType)
                document.title=this.title; 
                if(data[0].bgImg){
                    let bgImgs=data[0].bgImg.split('#');
                    let bgImg=bgImgs[0];
                    let bgImg2=bgImgs.length>1 ? bgImgs[1]:"";
                    //this.bgImg="url('"+localStorage.getItem("imgIp")+"/"+bgImg+"')";
                    
                    this.bgImg="url('"+bgImg+"')";
                    if(bgImg2){
                        this.bgImg2=bgImg2
                       // this.bgImg2=localStorage.getItem("imgIp")+"/"+bgImg2
                    }
                }else
                    this.bgImg="url('../assets/img/bg/bg7.png')"
                
                if(!this.loginImg){
                    this.loginImg=this.bgImg2;
                }
                sessionStorage.setItem("logo",this.loginImg);
                console.log(this.bgImg)
            })
        }else{
            this.loading=false;
            window.setTimeout(function(){
                
                document.getElementById('cube-wrapper').style.display = "none";
                document.getElementById('preloader-body').style.display = "none";
            },1000)
        }
        
    },
    focuss(event){
       
       
    },
    login(){

       if(this.account==""){
            document.getElementById("errormsg").innerHTML="请输入账号!";
            return;
          
       }
       if(this.password==""){
            document.getElementById("errormsg").innerHTML="请输入密码!";
            return;
       }
      
        this.loading=true;
        let sef=this;
       
       
        localStorage.setItem("ismobile","N");
        if(this.isApp=="Y"||localStorage.getItem("autoLogin")=="Y"||this.checked){
            localStorage.setItem(this.sCode+"weidaUser",this.account);
            localStorage.setItem(this.sCode+"weidaPwd",this.password);
        }
        localStorage.setItem("checked",this.checked ? "Y":"N");
        
        //document.getElementById('cube-wrapper').style.display = "block";
        //document.getElementById('preloader-body').style.display = "block";
        //alert(this.isBind+"=="+this.accountBind)
        if(this.isBind=="Y"&&this.accountBind!=this.account){
            this.$message.error('账号已被绑定，更换账号请联系管理员');
            return;
        }
        this.$postEncrypt('api','api/login/checkLogin',
          {
              account:escape(this.account),
              password:escape(this.password),
              imgCode:this.imgCode,
              company:escape(this.company),
              sCode:escape(this.sCode),
              isCode:this.sCode=="tzjj" ?"Y":"",
              isApp:this.isApp
          }


        ).then(data=>{
           
            this.loading=false;
            
            document.getElementById('cube-wrapper').style.display = "none";
            document.getElementById('preloader-body').style.display = "none";
           
            if(data[0].status=="error"){
                 document.getElementById("errormsg").innerHTML=unescape(data[0].msg+"！")
            }else{
                let ips=data[0].ip;
                data=data[0].data;
                
                localStorage.setItem("ips",JSON.stringify(ips));
               
                let token=data[0].token;
               
                let company=data[0].company;
                let username=data[0].username;
                let userId=data[0].userId;
                let url=data[0].url;
                let isUpdatePwd=data[0].isUpdatePwd;
                localStorage.setItem("autoLogin",data[0].autoLogin);
                sessionStorage.setItem("token",token);
                sessionStorage.setItem("groupName",data[0].groupName);
                localStorage.setItem("company",company);
                localStorage.setItem("username",username);
                localStorage.setItem("userId",userId);
                sessionStorage.setItem("isUpdatePwd",isUpdatePwd);
                console.log("url===="+url);
                //alert(localStorage.getItem("autoLogin"));
                if(this.$route.query.isDevOps){
                    sessionStorage.setItem("isDevOpsSet",this.$route.query.isDevOps)
                }else{
                    sessionStorage.setItem("isDevOpsSet","")
                }
                if(this.isApp=="Y"){
                    sessionStorage.setItem("isApp","Y");
                    sessionStorage.setItem("filenames",this.filenames);
                    localStorage.setItem("isApp","Y");
                    let url="main";
                    if(this.mainType){
                        url=this.mainType;
                    }
                  
                    this.$router.push({path:"/"+url,query:{title:this.title,'isApp':'Y','filenames':this.filenames}});
                }else if(this.isYtj=="Y"){
                    sessionStorage.setItem("filenames",this.filenames);
                    sessionStorage.setItem("isYtj",this.isYtj);
                    sessionStorage.setItem("path","/main?isYtj=Y&filenames="+this.filenames+"&title="+this.title)
                     this.$router.push({path:"/main?isYtj=Y&filenames="+this.filenames,query:{title:this.title}});
                }else{
                    this.$router.push({path:url,query:{title:this.title}});
                    
                    localStorage.setItem("isApp","");
                }
            }
        });
    }

  }
}
</script>

<style scoped  src="../assets/css/loading.css">
</style>
<style scoped>
    .focusState {position: absolute;}
    .triangle{
        width: 0;
        height: 0;
        position: absolute;
        bottom: 0;
        right: 0;
        border-top: 30vh solid #b3b3b300;
        border-right: 30vw solid #f9f9f9;
    }
    .app{
        height:100%;
        width:100%;
        background-size: 100% 100%;
        display:flex;
        flex-direction: column;
        background-repeat: no-repeat;
       /* background-image:url('http://8.136.193.200:8888//rootImg/gm/logobg3.png');*/
    }
    .header{
        height:50px;
        font-size:28px;
        color:#020202;
        font-weight: bold;
        text-align: center;
        margin-top:0.8rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .header img{
        vertical-align: middle;
        width:0.6rem;
    }
    .header_title{
        vertical-align: middle;
        color:#fff;
        font-size:0.38rem;
        letter-spacing: 1px;
        text-shadow: 0px 2px 7px rgba(0, 0, 0, 0.5);
        font-family: PingFangSC-Heavy, PingFang SC;
    }
    .header_title_en{
        vertical-align: middle;
        color:#fff;
        font-size:0.18rem;
        font-family: ArialMT;
    }
    .container{
        width:100%;
        height:100%;
        text-align:center;
        flex:1;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
        font-size:0.12rem;
    }
    .container >>> .el-input__inner{
        border:0;
    }
    body {
        margin: 0;
      }
      ::-webkit-scrollbar {
        display: none;
      }
     
    .login{
        width:5rem;
        height:100%;
        display:flex;
        flex-direction: row;
        /*background-color:rgba(0, 3, 12,0.46);*/
        border-radius: 7px;
        align-items: center;
        justify-content: center;
        min-width:350px;
        max-width:490px;
        overflow: hidden;

    }
    .boxMain{
        display: flex;
        flex-direction: row;
        width:100%;
    }
    .group1{
        text-align: left;
        padding:20px;
    }
    .group1 img{
        width:38px;
        float:left;
    }
    .group1 span{
        color:#fff;
        margin-left:10px;
        font-family: PingFangSC-Regular, PingFang SC;
        line-height: 32px;
        font-size:25px;
    }
    .mod2{
        height:58%;
        flex:1;
       /* min-height: 500px;*/
        background-size:100% 100% ;
        background-repeat: no-repeat;
    }
    .mod3{
        width:100%;
        height:58%;
       /* min-height:500px;*/
        background:#fff;
        box-sizing: border-box;
        text-align: left;
        min-height:400px;
        overflow: hidden;
        box-shadow:4px 15px 10px -15px #D8D8D8;
    }
    .mod3 >>> .el-card{
        overflow: hidden;
    }
    .mod3 >>> .el-card__body{
        overflow: hidden;
        position: relative;
    }
    .mod3 >>> .el-input__inner{
        background-color:#f5f5f5 !important;
    }
    .outer1{
        position:relative;
        height:100%;
        
    }
    .bottom{
        position: absolute;
        bottom: 0;
        text-align:left;
        padding:15px;
        color:#fff;
    }
    .word3{
        font-size:22px;
    }
    .txt1{
        font-size:22px;
    }
    .info1{
        font-size:12px;
        margin-top:15px;
    }
    .mod4{
        height:30px;
        color:red;
        line-height:30px;
        font-size:0.2rem;
        text-align:center;
    }
    .word4{
        margin-top:5%;
        font-size:0.24rem;
        font-weight: bold;
        color:#242424;
        
        font-family: PingFangSC-Heavy, PingFang SC;
    }
    .word4 span{
        border-bottom: 2px solid #405A77;
    }
    .mod5{
        text-align: left;
        width:100%;
        color:#405A77;
        font-size:14px
    }
    .mod6{
        height:0.3rem;
    }
     .mod7{
        text-align: left;
        width:100%;
        color:#405A77;
        font-size:14px
    }
    .mod8{
        height:60px;
    }
    .waring_text{
        font-size:50px;
        color:red;
        display:flex;
        flex-direction: column;
        justify-self: center;
        align-self:center;
    }
    .mod9{
        position: absolute;
        bottom:0px;
        width:100%;
    }

        
    .homeapp{
        width:100%;
        height:100VH;
        
    }
    .homeapp .home{
        width :100%;
        height :100%;
        display :flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
        
    .homeapp .box{
        max-width:500px;
        width :40%;
        height: 65VH;
        min-height:500px;
        background-color: #ffffff;
        border: 30px solid rgba(255, 255, 255, 0.3);
        -webkit-background-clip: padding-box; /* for Safari */
        background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
        border-radius: 10px;
        display: flex;
       text-align: center;
        flex-direction: column;
        align-items: center;
        justify-content :center;
    }
    .homeapp .login_text{
        font-size:22px;
        font-weight: bold;
        margin-bottom:40px;
    }
    .homeapp .input{
        width: 90%;
        margin-bottom:8%;
    }
    .homeapp .input >>> .el-input__inner {
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-radius:0;
    }
    .homeapp .home21{
        width: 100%;
        height :100%;
        background:url('../assets/login/bg1.jpg');
        background-size: 100% 100%;
        transform: scale(1.3);
        position :fixed;
        z-index: -1;
        
        animation:mymove 50s infinite;
        -webkit-animation:mymove 50s infinite; /*Safari and Chrome*/
        animation-direction:alternate;
        -webkit-animation-direction:alternate; /* Safari 和 Chrome */
        animation-delay:2s;
        -webkit-animation-delay:2s; /* Safari 和 Chrome */
    }
    .homeapp .bgclass1{
        background:url('../assets/login/bg1.jpg');
        background-size: 100% 100%;
    }
    .homeapp .bgclass2{
        background:url('../assets/login/bg2.jpg');
        background-size: 100% 100%;
    }
    .homeapp .bgclass3{
        background:url('../assets/login/bg3.jpg');
        background-size: 100% 100%;
    }
    .homeapp .bgclass4{
        background:url('../assets/login/bg4.jpg');
        background-size: 100% 100%;
    }
    @keyframes mymove {
        0%{
            transform: scale(1.3);
            background:url('../assets/login/bg1.jpg');
            background-size: 100% 100%;
        }
        33%{
            transform: scale(1.2);
            background:url('../assets/login/bg2.jpg');
            background-size: 100% 100%;
        }
        66%{
            transform: scale(1.1);
            background:url('../assets/login/bg3.jpg');
            background-size: 100% 100%;
        }
        100%{
            transform :scale(1);
            background:url('../assets/login/bg4.jpg');
            background-size: 100% 100%;
        }
    }
</style>
<style >
.el-form-item__label{
    font-size:14px;
}
.gutter{
    display:inline !important;
}
</style>